<script setup>
import { reverseList, refreshChatRecordingList, pageNum } from '@/stores/chatRecording';
import { userId, userHeadShot, userName } from '../../stores/user'
import { watch, onMounted, ref, nextTick } from 'vue'
import { friendHeadShot, type } from '../../stores/friend'
import { getFriendHeadShot } from '@/stores/getFriend'
import {
  Message
} from '@element-plus/icons-vue'
import { downloadFile, splicingUrl } from '@/stores/loading'
import { openImage, closeImage } from '@/stores/page'
import { textProps } from 'element-plus';


const textRef = ref()

const tmp = ref(0)

watch(() => reverseList.value, () => {
  handleScroll()
},
  { deep: true })

onMounted(() => {
  handleScroll()
  // console.log('onMounted')
})
const handleScroll = () => {
  nextTick(() => {
    // if(scrollTop.value !== 0 || tmp.value < 2){
    textRef.value.setScrollTop(1e16)
    // console.log('sroll')
    // tmp.value = tmp.value + 1 
  // }
  // else{
  //   textRef.value.setScrollTop(500)
  // }
  });
  
}

//滚轮距离顶部的距离
// const scrollTop = ref(0)

// const doScroll = (event)=>{
//   scrollTop.value = event.scrollTop;
//   // console.log(event)
//   console.log(scrollTop.value)
//   if(scrollTop.value === 0){
//     console.log(type.value)
//     refreshChatRecordingList(type.value, pageNum.value)
//     pageNum.value = pageNum.value + 1
//   }
// }

</script>
<template>
  <!-- <el-scrollbar ref="textRef" style="height:64.5vh" @scroll="doScroll"> -->
  <el-scrollbar ref="textRef" style="height:64.5vh">
    <div v-for="item in reverseList" :key="item" class="scrollbar-demo-item">
      <!-- {{ console.log(item) }} -->
      <tr v-if="item.sendUserId === userId" id="right" style="width: 100%; ">
        <td v-if="item.messageType === 'text'" id="margin">
          <div><tr id="textmargin" >{{ userName }}</tr></div>
          <v-textarea v-model="item.content" row-height="50" rows="1" variant="outlined"
            style="width: 240px;" auto-grow readonly bg-color="rgb(103, 230, 135)"
            color="black">
          </v-textarea>
        </td>
        <td v-else-if="item.messageType === 'file'" id="margin">
          <div><tr id="textmargin" >{{ userName }}</tr></div>
          <el-button link type="primary" size="small" :icon="Message" 
          style="font-size:300%;" @click="downloadFile(splicingUrl(item.fileUrl), item.fileUrl.split('_')[2])">下载文件</el-button>
        </td>
        <td v-else-if="item.messageType === 'voice'" id="margin">
          <div><tr id="textmargin" >{{ userName }}</tr></div>
          <audio controls>
            <source :src="splicingUrl(item.fileUrl)" />
          </audio>
        </td>
        <td v-else-if="item.messageType === 'picture'" id="margin">
          <div><tr id="textmargin">{{ userName }}</tr></div>
    <el-image
      style="width: 100px; height: 100px"
      :src="splicingUrl(item.fileUrl)"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[splicingUrl(item.fileUrl)]"
      fit="contain"
      @click="openImage()"
      @close="closeImage()"
    />
        </td>
        <!-- <div id="margin">{{ userName }}</div> -->
        <td>
        <el-avatar shape="square" :size="50" :src="userHeadShot" />
        </td>
      </tr>
      <tr v-else style="width: 100%;" id="left">
        <td>
          <!-- {{ console.log(item) }} -->
        <el-avatar shape="square" :size="50" :src="splicingUrl(item.sendUserHeadURL)" id="margin"/>
      </td>
        <td v-if="item.messageType === 'text'" >
          <div><tr id="margin">{{ item.sendUserName }}</tr></div>
          <v-textarea v-model="item.content" row-height="10" rows="1" variant="outlined"
            style="width: 240px;" auto-grow readonly bg-color="#FFFFFF"
            color="black"></v-textarea>
        </td>
        <td v-else-if="item.messageType === 'file'">
          <div><tr id="margin">{{ item.sendUserName }}</tr></div>
          <el-button link type="primary" size="small" :icon="Message" 
          style="font-size:300%;" @click="downloadFile(splicingUrl(item.fileUrl),item.fileUrl.split('_')[2])" class="margin">下载文件</el-button>
        </td>
        <td v-else-if="item.messageType === 'voice'">
          <div><tr id="margin">{{ item.sendUserName }}</tr></div>
          <audio controls>
            <source :src="splicingUrl(item.fileUrl)" />
          </audio>
        </td>
        <td v-else-if="item.messageType === 'picture'" id="margin">
          <div><tr id="margin">{{ item.sendUserName }}</tr></div>
          <el-image
      style="width: 100px; height: 100px"
      :src="splicingUrl(item.fileUrl)"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[splicingUrl(item.fileUrl)]"
      fit="contain"
      @click="openImage()"
      @close="closeImage()"
    />
        </td>
      </tr>
    </div>
  </el-scrollbar>
</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  margin: 10px 20px;
  border-radius: 4px;
}
#right{
  display: flex;
  align-items: right;
  text-align: right;
  justify-content: right;
  width:70%
}
#left{
  display: flex;
  align-items: left;
  text-align: left;
  justify-content: left;
  width:70%
}
#margin{
  margin : 0px 10px;
}

#textmargin{
  margin : 0px 10px;
  display: flex;
  align-items: right;
  text-align: right;
  justify-content: right;
}

</style>